<template>
    <div>
        <p>面试题</p>
        <table>
            <tr v-for="(row, rowIndex) in info" :key="rowIndex">
                <td v-for="(cell, cellIndex) in row" :key="cellIndex" :style="getCellStyle(cell, rowIndex, cellIndex)">
                    <div>{{ cell.bno }}</div>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: 'Home',
    data() {
        return {
            info: [{
                bno: '',
                stat: '',
                side: '',
                size: '',
                lock: '',
                type: ''
            }],
        }
    },
    components: {},
    methods: {
        initdata() {
            axios.get('http://localhost:7070/demo').then(res => {
                this.info = res.data.data;




                const rows = Array.from({ length: 6 }, () => new Array(6).fill(null));

                this.info.forEach((item, index) => {
                    const rowIndex = Math.floor(index / 6);
                    const colIndex = index % 6;
                    rows[rowIndex][colIndex] = item;
                });

                this.info = rows;

            });
        },
        // 方法，用于获取对应位置的数据项
        // getItem(rowIndex, columnIndex) {
        //     // // eslint-disable-next-line no-debugger
        //     // debugger
        //     const index = rowIndex * 4 + columnIndex;
        //     return this.info[index] || {};
        // },

        // getCellClass(column) {
        //     // eslint-disable-next-line no-debugger
        //     // debugger
        //     // const item = this.getItem(rowIndex, columnIndex);
        //     const classes = [];
        //     // let   rowCount= Math.ceil(this.info.length / this.columnCount)
        //     if (column.stat === 1) {
        //         classes.push('red-cell');
        //     }else {
        //         classes.push('green-cell')
        //     }
        //     if (column.size == 1){
        //         var elementById = document.getElementById('aid');
        //         elementById.rowSpan = '2'
        //     }else if (column.size == 2){
        //         // eslint-disable-next-line no-redeclare
        //         var elementById = document.getElementById('aid');
        //         elementById.rowSpan = '4'
        //     }
        //
        //
        //
        //
        //     return classes.join(' ');
        // }
        // eslint-disable-next-line no-unused-vars
        getCellStyle(cell, rowIndex, cellIndex) {
            if (!cell) return { backgroundColor: 'gray', height: '50px', width: '50px' };
            if (cell.bno === 1) return { backgroundColor: 'red', height: '50px', width: '50px' };
            return { backgroundColor: 'green', height: '50px', width: '50px' };
        }


    },
    computed: {
        // // 计算属性，用于获取行数和列数
        // rowCount() {
        //     return Math.ceil(this.info.length / this.columns);
        // },
        // columnCount() {
        //     return this.columns;
        // }


        //     把行数据变为列数据
    //     得出总行数
    //         rowCount(){
    //             return Math.ceil(this.info.length / this.columnCount)
    //         },
    //         newInfo(){
    //            let columnList = []
    //             for (let i = 0; i <this.columnCount; i++) {
    //                     let item = []
    //                 for (let j = 0; j < this.rowCount; j++) {
    //                     item.push(this.info[i+j*this.rowCount])
    //                 }
    //                 columnList.push(item)
    //             }
    //          let   newInfo = columnList
    //             console.log('newinfo',newInfo)
    //         return newInfo
    //         }
    },

    mounted() {
        this.initdata();
    },
    props: {
        columnCount: {
            type: Number,
            default: 9
        }
    }
}
</script>

<!--<style scoped>-->
<!--.home {-->
<!--    margin: 0 auto;-->
<!--    border-collapse: collapse; /* 合并边框 */-->
<!--}-->

<!--.home td {-->
<!--    border: 1px solid black; /* 添加黑色实线边框 */-->
<!--    padding: 8px; /* 添加内边距 */-->
<!--}-->

<!--.first-cell {-->
<!--    color: red; /* 将第一个元素设置为红色 */-->
<!--}-->

<!--.empty-header {-->
<!--    background-color: gray; /* 空灰色背景 */-->
<!--    height: 4em; /* 高度为四个小单元格 */-->
<!--}-->

<!--/*.double2-height {*/-->
<!--/*    rowspan: 4; !* 高度为4个小单元格 *!*/-->
<!--/*}*/-->

<!--/*.double-height {*/-->
<!--/*    rowspan: 2; !* 高度为两个小单元格 *!*/-->
<!--/*}*/-->

<!--.red-cell {-->
<!--    background-color: red; /* 红色背景 */-->
<!--}-->
<!--.green-cell {-->
<!--    background-color: green; /* 灰色背景 */-->
<!--}-->
<!--</style>-->

<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
}

td {
    border: 1px solid #000;
    text-align: center;
    padding: 10px;
}
</style>
